<template>
	<view class="medremind">
		<view class="med_con public_sty" v-for="(item,index) in remindData":key="index">
			<view class="med_title">
				<text>{{item.shopname}}</text>
				<uni-icons type="trash" color="#C0C0C0" @click="deleMed(index,item.shopname)"></uni-icons>
			</view>
			<view class="med_deils  oper_til">
				<text>用药详情：</text>
				<text class="med_sty">每次{{item.num}}片</text>
				<text>/</text>
				<text class="med_sty">每天{{item.content}}次</text>
				<text>/</text>
				<text class="med_sty">用药{{item.days}}天</text>
			</view>
			<view class="med_time  oper_til">
				<text>提醒时间：</text>
				<view class="time_sty" v-for="(item,idx) in item.times" :key="idx">
					<text>{{item.time}}</text>
					<text v-if="idx!==2">/</text>
				</view>
			</view>
			<view class="med_next">
				<text>下次用药时间 {{item.nextime}}</text>
			</view>
		</view>
		<view class="btn" @click="remindBtn">
			<button type="primary"><text>发起提醒</text></button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				remindData:[
					{
						shopname:'999感冒灵',
						num:2,
						content:3,
						days:7,
						times:[
							{
								time:"09:00"
							},
							{
								time:"13:00"
							},
							{
								time:"18:00"
							}
						],
						nextime:'13:00'
					},
					{
						shopname:'伊可新 维生素E片',
						num:2,
						content:3,
						days:7,
						times:[
							{
								time:"09:00"
							},
							{
								time:"13:00"
							},
							{
								time:"18:00"
							}
						],
						nextime:'18:00'
					}
				]
			}
		},
		methods:{
			remindBtn(){
				uni.navigateTo({
					url:"./remind"
				})
			},
			deleMed(idx,name){
				console.log(name)
				uni.showModal({
					title:"提示",
					content:`确定删除${name}用药提醒吗？`,
					confirmColor:"#00B359",
					confirmText:"删除",
					cancelColor:"#666666",
					success: (res) => {
						  if (res.confirm) {
						           this.remindData.splice(idx,1)
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.medremind{
		padding: 30rpx;
	}
	.med_con{
		padding: 30rpx;
		margin-bottom: 24rpx;
		.med_title{
			display: flex;
			justify-content: space-between;
		}
		.med_deils{
			margin-top: 26rpx;
			.med_sty{
				margin: 0rpx 20rpx;
			}
		}
		.med_time{
			display: flex;
				margin-top: 26rpx;
			.time_sty{
				text{
					margin: 0rpx 10rpx;
				}
			}
		}
		.med_next{
			margin-top: 22rpx;
			color: #00B359;
			font-size: 24rpx;
			text-align: center;
		}
	}
	.btn{
		left: 4%;
	}
</style>
